<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="batchPassVisible"
    :before-close="closeDialog"
    width="47%"
  > 
    
    <div v-show="isShowRateFrom">
      <div
        class="itemDiv flex align-center"
        v-for="(item, index) in sourceForm"
        :key="index"
      >
        <div class="leftDiv"></div>
        <div class="rate_div">
          <el-form
            :inline="true"
            :model="item"
            class="demo-form-inline"
          >
            <el-form-item label="订单来源设置：" class="firstlabel">
              <el-select
                v-model="item.source_id"
                placeholder="请选择订单来源"
                style="width: 170px"
                @change="changeSourceId"
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.id"
                  :label="item.source_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合同" class="itemlabel" prop="smartcontract">
              <el-input
                v-model="item.smartcontract"
                placeholder="1.50"
              ></el-input>
              <span class="itemlabel">元</span>
            </el-form-item>
            <el-form-item label="实名认证" class="itemlabel" prop="realname">
              <el-input v-model="item.realname" placeholder="0.40"></el-input>
              <span class="itemlabel">元</span>
            </el-form-item>
            <el-form-item label="平台" class="itemlabel" prop="platform">
              <el-input v-model="item.platform" placeholder="0.60"></el-input>
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item label="代扣" class="itemlabel" prop="withhold">
              <el-input v-model="item.withhold" placeholder="0.60"></el-input>
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item label="存证" class="itemlabel" prop="file">
              <el-input v-model="item.file" placeholder="0.45"></el-input>
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item class="delBtn">
              <el-button type="text" @click="deleteFrom(item, index)">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <p class="p">
        手续费类型可选填，填写的手续费类型将显示到账单手续费明细中
      </p>
      <el-button type="primary" @click="addSource" icon="el-icon-plus"
        >新增订单来源</el-button
      >
    </div>
    <el-form 
        :model="batchRefuseForm" 
        ref="batchRefuseForm"
        v-show="isShowRefuseFrom">
        <el-form-item
            label="原因："
            label-width="120px"
            prop="check_refuse_type"
            :rules="[
            { required: true, message: '请输入原因', trigger: 'blur' },
            ]"
        >
            <el-select
            v-model="batchRefuseForm.check_refuse_type"
            placeholder="请选择"
            @change="changeOption"
            >
            <el-option
                v-for="item in refuseList"
                :key="item.value"
                :label="item.text"
                :value="item.value"
            ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item
            label="其他原因："
            label-width="120px"
            :rules="[
            { required: isRequired, message: '请输入原因', trigger: 'blur' },
            ]"
        >
            <el-input
              type="textarea"
              v-model="batchRefuseForm.check_refuse_reason"
              placeholder="请输入备注原因信息！例如：图片不符合规范"
              prop="check_refuse_reason"
              :rows="3"
              maxlength="50"
              show-word-limit
            ></el-input>
        </el-form-item>
    </el-form>
    <h3 class="tableTitle">{{batchPassTitle}}</h3>
    <el-table :data="batchPassData" border>
        <el-table-column prop="shopname" label="供应商名称"/>
        <el-table-column prop="category_name" label="品类名称" />
    </el-table>
    <h5 class="tableTitle total">共{{batchPassTotal}}个品类</h5>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitPass('batchRefuseForm')">确定</el-button>
    </div>
    
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogTitle: {
      type: String,
    },
    batchPassTitle: {
      type: String,
    },
    batchPassTotal: {
      type: Number,
    },
    batchPassVisible: {
      type: Boolean,
      default: false,
    },
    batchPassData: {
      type: Array,
      default: () => [],
    },
    refuseList: {
      type: Array,
      default: () => [],
    },
    batchRefuseForm: {
      type: Object,
      default: () => ({}),
    },
    isShowRefuseFrom: {
      type: Boolean,
      default: false,
    },
    isShowRateFrom: {
      type: Boolean,
      default: false,
    },
    isRequired: {
      type: Boolean,
      default: false,
    },
    sourceList: {
      type: Array,
      default: () => [],
    },
    sourceForm: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    closeDialog(param) {
      this.$emit("closeDialog", param);
    },
    submitPass(param) { 
      // console.log('param',param, this.isShowRateFrom)
      if(this.isShowRateFrom){
        // console.log('param',this.sourceForm)
        let flag = false;
        this.sourceForm.forEach((item) => {
          for (var key in item) {
            if (key == "source_id" && !item[key]) {
              this.$message.error("请选择订单来源");
              flag = false;
              return false;
            } else if (key!= "source_id" && key!= "is_delete"){
              if(!item[key]){
                this.$message.error("请确保已设置费率");
                flag = false;
                return false;
              } else if(item[key]){
                var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if (!isNum.test(item[key])) {
                  this.$message.error("费率为正数且最多两位小数");
                  flag = false;
                  return false;
                } else {
                  flag = true;
                  return
                }
              }
            } else {
              flag = true;
            }
          }
        });
        if (this.sourceForm.length > 1) {
          const ids = this.sourceForm.map((item) => item.source_id);
          const idsSet = new Set(ids);
          if (idsSet.size != ids.length) {
            this.$message.error("订单来源不能重复");
            flag = false;
            return false;
          } else {
            flag = true;
          }
        }
        if (flag) {
          this.$emit("submitPass", this.sourceForm);
        }
      } else {
        this.$emit("submitPass", param);
      }
    },
    changeOption(param) {
      this.$emit("changeOption", param);
    },
    addSource(param) {
      this.$emit("addSource");
    },
    deleteFrom(item, index) {
      this.$emit("deleteFrom", item, index);
    },
    changeSourceId(val) {
      this.$emit("changeSourceId", val);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body{
  height: 600px;
  overflow: auto;
}
.tableTitle{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: center;
  line-height: 35px;
  margin-bottom: 10px;
}
.total{
  font-size: 14px;
  margin-top: 10px;
  color: #999999;
}
/deep/.el-dialog__body{
  padding: 20px;
}
.goodsList{
  height: 100px;
  padding: 5px 10px;
  // border-bottom: 1px solid #E6E6E6;
  border-radius: 3px;
}

.itemDiv {
  background: #f5f5f5;
  padding: 8px 20px;
  position: relative;
  margin-bottom: 20px;
  .leftDiv {
    width: 300px;
  }
  .firstlabel {
    width: 300px;
    position: absolute;
    top: 40%;
    left: 15px;
  }
  .delBtn {
    position: absolute;
    top: 40%;
    right: 15px;
  }
}
.rate_div {
  width: 55%;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 0 12px;
  .el-form .el-input {
    width: 80px;
  }
  .itemlabel {
    padding: 0 10px;
    background: #e6e6e6;
  }
}
.p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #cccccc;
  line-height: 40px;
}
</style>